<template>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%; margin: auto; margin-top: 30px">
        <el-tab-pane label="通过" name="first">
            <span slot="label" style="font-size: 16px">
                <i style="margin: 0 10px 0 10px">
                    <span style="padding-left: 8px; font-weight: bold; font-style: normal">通过</span>
                </i>
            </span>
            <table class="table-1">
                <tr>
                    <td style="text-align: right; font-weight: 700; color: #000">当前环节:</td>
                    <td colspan="3" style="text-align: left">{{ detailform.bz }}</td>
                </tr>
                <tr v-if="detailform.ishq == 1">
                    <td style="text-align: right; font-weight: 700; color: #000">是否会签:</td>
                    <td colspan="3" style="text-align: left">
                        <el-radio-group v-model="radio">
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; font-weight: 700; color: #000">步骤:</td>
                    <td colspan="3" style="text-align: left">
                        <el-radio-group v-model="form.nextnodeid" v-show="radio == 0">
                            <el-radio :label="item.id" v-for="(item, index) in detailform.nextnodelist" :key="index"
                                @change="getry(item)">{{ item.bz }}</el-radio>
                        </el-radio-group>
                        <!-- 多选控制只能选一个操作 -->
                        <div>
                            <el-checkbox-group v-model="options" v-show="radio == 1">
                                <el-checkbox :label="item.id" v-for="(item, index) in detailform.hqnodelist"
                                    :key="index" @change="searchChangeitem(item)">{{ item.bz
                                    }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </td>
                </tr>
                <tr v-if="detailform.ishq == 0">
                    <td style="text-align: right; font-weight: 700; color: #000">选择人员:</td>
                    <td colspan="3" style="text-align: left">
                        <el-radio-group v-model="form.selectuser">
                            <el-radio :label="item.id" v-for="(item, index) in userlist" :key="index">{{ item.name
                                }}</el-radio>
                        </el-radio-group>
                    </td>
                </tr>
                <tr v-if="detailform.ishq == 1 && radio == 0">
                    <td style="text-align: right; font-weight: 700; color: #000">选择人员:</td>
                    <td colspan="3" style="text-align: left">
                        <el-radio-group v-model="form.selectuser">
                            <el-radio :label="item.id" v-for="(item, index) in userlist" :key="index">{{ item.name
                                }}</el-radio>
                        </el-radio-group>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; font-weight: 700; color: #000">意见:</td>
                    <td colspan="3">
                        <div style="display: flex; justify-content: space-between">
                            <div style="width: 48%">
                                <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入内容"
                                    v-model="form.clyj">
                                </el-input>
                            </div>
                            <div class="xzyj" v-if="role == '10013'">
                                <div v-for="(item, index) in yjlistld" :key="index" class="xzyjitem"
                                    :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                    @click="getYjVal(item, index)">
                                    {{ item }}
                                </div>
                            </div>
                            <div class="xzyj" v-else-if="role == '10010'">
                                <div v-for="(item, index) in yjlistnq" :key="index" class="xzyjitem"
                                    :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                    @click="getYjVal(item, index)">
                                    {{ item }}
                                </div>
                            </div>
                            <div class="xzyj" v-else>
                                <div v-for="(item, index) in yjlist" :key="index" class="xzyjitem"
                                    :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                    @click="getYjVal(item, index)">
                                    {{ item }}
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: center;">
                        <el-button size="mini" type="primary" @click="nextstep">通过</el-button>
                    </td>
                </tr>
            </table>
        </el-tab-pane>
        <el-tab-pane label="回退" name="second" :disabled="detailform.isth == 0">
            <span slot="label" style="font-size: 16px">
                <i style="margin: 0 10px 0 10px">
                    <span style="padding-left: 8px; font-weight: bold; font-style: normal; color: red">回退</span>
                </i>
            </span>
            <table class="table-1">
                <tr>
                    <td style="text-align: right; font-weight: 700; color: #000">当前环节:</td>
                    <td colspan="3" style="text-align: left">{{ detailform.bz }}</td>
                </tr>
                <tr>
                    <td style="text-align: right; font-weight: 700; color: #000">步骤:</td>
                    <td colspan="3" style="text-align: left">
                        <el-radio-group v-model="form.nextnodeid">
                            <el-radio :label="item.id" v-for="(item, index) in detailform.lastnodelist" :key="index"
                                @change="getryht(item)">{{ item.bz }}</el-radio>
                        </el-radio-group>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; font-weight: 700; color: #000">选择人员:</td>
                    <td colspan="3" style="text-align: left">
                        <el-radio-group v-model="form.selectuser">
                            <el-radio :label="item.id" v-for="(item, index) in userlistht" :key="index">{{ item.name
                                }}</el-radio>
                        </el-radio-group>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; font-weight: 700; color: #000">意见:</td>
                    <td colspan="3">
                        <div style="display: flex; justify-content: space-between">
                            <div style="width: 48%">
                                <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入内容"
                                    v-model="form.clyj">
                                </el-input>
                            </div>
                            <div class="xzyj">
                                <div v-for="(item, index) in yjlistht" :key="index" class="xzyjitem"
                                    :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                    @click="getYjVal(item, index)">
                                    {{ item }}
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: center;">
                        <el-button size="mini" type="primary" @click="nextstepht">回退</el-button>
                    </td>
                </tr>
            </table>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import { checkall } from '@/api/index';
export default {
    props: ['form', 'detailform', 'multipleSelection', 'userlist','activeName'],
    data() {
        return {
            options: [], //测试
            addlistval: false,
            // activeName: 'first',
            userlistht: [],
            radio: 0,
            yjdeepcolor: null,
            yjlist: ['同意', '同意，请认真办理！', '拟同意，请领导批示！', '请办公室盖章！', '已盖章', '已办理，请归档！'],
            role: this.$store.getters.role,
            yjlistld: [
                '拟同意，请智宗同志阅示！',
                '同意',
                '同意，请认真办理！',
                '拟同意，请领导批示！',
                '请办公室盖章！',
                '已盖章',
                '已办理，请归档！'
            ],
            yjlistnq: [
                '已归档',
                '请盖章',
                '同意',
                '同意，请认真办理！',
                '拟同意，请领导批示！',
                '请办公室盖章！',
                '已盖章',
                '已办理，请归档！'
            ],
            yjlistht: ['不同意', '不同意，请认真复核！'],
            checkList: []
        };
    },
    methods: {
        // 选中一个的值
        searchChangeitem(val) {
            console.log(val);
        },
        // 点击获取人员列表
        getry(val) {
            this.userlist = val.userlist;
        },
        // 点击获取人员列表(回退)
        getryht(val) {
            console.log(val);
            this.userlistht = val.userlist;
        },
        // 获取到每一个意见值
        getYjVal(val, i) {
            this.yjdeepcolor = i;
            console.log(val);
            this.form.clyj = val;
        },

        // 选项卡
        handleClick() {
            var that = this;
            if (this.activeName == 'first') {
                if (this.detailform.ishq == 0) {
                    if (that.detailform.nextnodelist.length != 0) {
                        that.form.nextnodeid = that.detailform.nextnodelist[0].id;
                        that.userlist = that.detailform.nextnodelist[0].userlist;
                        that.form.selectuser = that.userlist[0].id;
                        that.form.zt = 1
                    }
                }
            } else if (this.activeName == 'second') {
                this.form.nextnodeid = this.detailform.lastnodelist[0].id;
                this.userlistht = this.detailform.lastnodelist[0].userlist;
                this.form.selectuser = this.userlistht[0].id;
                that.form.zt = 0
            }
        },
        // 下一步操作按钮
        nextstep() {
            var that = this;
            console.log(this.form)
            this.multipleSelection.map(item => {
                this.checkList.push({ id: item.id, clyj: this.form.clyj, nextnodeid: this.form.nextnodeid, selectuser: this.form.selectuser, zt: 1, ishq: this.detailform.ishq })
            })
            this.$confirm('确定通过审批？')
                .then(() => {
                    // 先判断是否会签（会签不用选人员）
                    if (this.detailform.ishq == 0) {
                        // 判断是否是最后一个节点（最后一个节点不用选人员）
                        if (that.detailform.isstartend == 2) {
                            that.checkall(this.checkList);
                        } else {
                            if (that.form.selectuser) {
                                that.checkall(this.checkList);
                            } else {
                                that.$message.error('请选择人员！！！');
                            }
                        }
                    } else {
                        if (this.radio == 1) {
                            that.form.selectuser = '';
                            if (that.options.length != 0) {
                                that.form.nextnodeid = that.options.toString();
                                that.form.ishq = '1';
                                that.checkall(this.checkList);
                                console.log(that.form);
                            } else {
                                that.$message.error('请选择！！');
                            }
                        } else {
                            that.form.ishq = '0';
                            if (that.form.selectuser) {
                                that.checkall(this.checkList);
                            } else {
                                that.$message.error('请选择人员！！！');
                            }
                        }
                    }
                })
                .catch((err) => {
                    this.$message.success('通过取消');
                    console.log(err)
                });
        },
        // 下一步回退
        nextstepht() {
            this.multipleSelection.map(item => {
                this.checkList.push({ id: item.id, clyj: this.form.clyj, nextnodeid: this.form.nextnodeid, selectuser: this.form.selectuser, zt: 0, ishq: this.detailform.ishq })
            })
            console.log(this.checkList)
            this.$confirm('确定回退审批？')
                .then(() => {
                    if (this.form.selectuser) {
                        this.checkall(this.checkList);
                    } else {
                        this.$message.error('请选择人员！！！');
                    }
                })
                .catch((err) => {
                    console.log(err,'err')
                    this.$message.success('回退取消');
                });
        },
        checkall(data) {
            checkall(data).then(res => {
                this.form={}
                this.detailform={}
                this.multipleSelection=[]
                this.userlist=[]
                this.activeName == 'first'
                this.$message.success('审批完成');
                this.$emit('close-tab')
            })
        }
    }
}
</script>
<style>
/* 选择意见 */
.xzyj {
    width: 48%;
    height: 110px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px 0;
    box-sizing: border-box;
}

.xzyj .xzyjitem {
    text-align: left;
    cursor: pointer;
    line-height: 24px;
}

.table-1 {
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    width: 100%;
    /*合并相邻表格的间距*/
}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}
</style>